<template>
  <div>
    <!--   头部开始-->
    <div style="height: 60px;background-color: #2c3e50; display: flex; align-items: center;">
      <div style="width: 200px; display: flex; align-items: center; padding-left: 15px">
        <img src="@/assets/logo1.svg" alt="" style="width: 35px; margin-top: 5px">
        <span style=" font-size: 20px; color: white; padding-left: 10px">签到系统</span>
      </div>
      <div style="flex: 1"></div>
      <div style="width: fit-content; display: flex; align-items: center; margin-right: 20px">
        <img :src="data.user.avatar || 'https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png'" alt=""
             style="width: 40px; height: 40px; border-radius: 50%;">
        <span style="margin-left: 15px; color: white; font-size: 15px">{{ data.user.name ? data.user.name : data.user.username }}</span>
      </div>
    </div>
    <!--   头部结束-->
    <!--   下面部分开始-->
    <div style="display: flex;">
      <!--     左边导航开始-->
      <div style="width: 200px; border-right: 1px solid #b7a9a9; min-height: calc(100vh - 60px)">
        <el-menu :default-active="router.currentRoute.value.path" router style="border: 0;">
          <el-menu-item index="/manager/home"><el-icon><House /></el-icon>系统主页</el-menu-item>
          <el-sub-menu  v-if="data.user.role === 'ADMIN'">
            <template #title>
              <el-icon>
                <User/>
              </el-icon>
              <span>员工管理</span>
            </template>
            <el-menu-item-group>
              <el-menu-item index="/manager/employee">员工信息</el-menu-item>
              <el-menu-item index="/manager/admin">管理员信息</el-menu-item>
            </el-menu-item-group>
          </el-sub-menu>
          <el-menu-item index="/manager/article" v-if="data.user.role === 'ADMIN'"><el-icon><Notebook /></el-icon>文章信息</el-menu-item>
          <el-menu-item index="/manager/department"><el-icon><OfficeBuilding /></el-icon>部门信息</el-menu-item>
          <el-menu-item index="/manager/data"><el-icon><DataAnalysis /></el-icon>数据统计</el-menu-item>
          <el-menu-item index="/manager/person"><el-icon><Avatar /></el-icon>个人信息</el-menu-item>
          <el-menu-item index="/manager/password"><el-icon><Lock /></el-icon>修改密码</el-menu-item>
          <el-menu-item @click="logout"><el-icon><RemoveFilled /></el-icon>退出登录</el-menu-item>
        </el-menu>
      </div>
      <!--     左边导航结束     -->
      <!--     右侧主题区域开始    -->
      <div style="flex: 1; width: 0;background-color: #fcf7f7; padding: 10px;">
        <RouterView @updateUser="updateUser"/>
      </div>
      <!--     右边主题区域结束-->
    </div>
    <!--   下面部分结束-->
  </div>
</template>

<script setup>
import router from "@/router/index.js";
import {Box, DataAnalysis, House, Notebook, RemoveFilled, User} from "@element-plus/icons-vue";
import {reactive} from "vue";

const data = reactive({
  user: JSON.parse(localStorage.getItem('xm-pro-user'))
})

const logout = () => {
  localStorage.removeItem('xm-pro-user')
  location.href='/login'
}

const updateUser = () => {
  data.user = JSON.parse(localStorage.getItem('xm-pro-user'))
}

</script>

<style scoped>
.el-menu .is-active {
  background-color: #e1ecfa !important;
}
.el-sub-menu__title {
  background-color: #e1ecfa !important;
}

</style>